<template>
  <div>
    <a-layout class="headerlayout">
      <a-layout-header>
        <Header></Header>
      </a-layout-header>
      <a-layout class="headerlayout">
        <a-layout-sider :style="{width:$store.state.asidewidth}" class="sider">
          <Menu></Menu>
        </a-layout-sider>
        <a-layout-content class="sider">
          <router-view v-slot="{ Component }">
            <transition name="fade">
              <keep-alive :max="10">
                <Component :is="Component" v-if="$route.meta.keepAlive" :key="$route.name"></Component>
              </keep-alive>
            </transition>
            <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.name"/>
          </router-view>
        </a-layout-content>
      </a-layout>
      <div class="Footerlayout">
        <a-layout-footer class="Footerlayout">
          <FootTer></FootTer>
        </a-layout-footer>

      </div>
    </a-layout>
  </div>


</template>

<script setup>
import Header from "~/components/layout/copments/header.vue"
import Menu from "~/components/layout/copments/menu.vue"
import {ref} from "vue";
import FootTer from "~/components/layout/copments/footter.vue"


</script>

<style scoped lang="scss">
.headerlayout {
  height: 100vh;

  .sider {
    margin-top: 1rem;
    height: 100%;


  }

  //.sider::-webkit-scrollbar,
  //.sider::-webkit-scrollbar-thumb,
  //.sider::-webkit-scrollbar-track
  //{
  //  display: none;
  //  width: 0;
  //  height: 0;
  //  background: transparent;
  //}

}

.fade-enter-from {
  opacity: 0;
}

.fade-enter-to {
  opacity: 1;
}

.fade-leave-from {
  opacity: 1;
}

.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-active {
  transition-delay: 0.3s;
}

.Footerlayout {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 99;
}

</style>